<template>
    <div class="Person">
        <!-- 头部 -->
		<Header :navActive="-1" ref="Header"/>
		<!-- 内容区域 -->
		<div class="main cl">
            <!-- banner -->
            <div class="banner"></div>
            <!-- block -->
            <div class="block w1200">
                <div class="left fl">
                    <div class="wantJob" v-if="wantJob.length>0">
                        <div class="item" :class="wantJobActive==index?'active':''" v-for="(item,index) in wantJob" :key="index" @click="changeJob(index,item.workNature_dictText)">{{item.workNature_dictText}}</div>
                    </div>
                    <div class="list">
                        <div class="item" v-for="(item,index) in list" :key="index">
                            <router-link :to="{name:'JobDetails',query:{id:item.id}}" target="_blank">
                                <div class="title">{{item.title}}</div>
                                <div class="other">
                                   <div class="money">{{item.minMoney === 0 && item.maxMoney === 0 ? '薪资面议' : item.money}}</div>
                                    <!-- <div class="money">{{item.money}}</div> -->
                                    <div class="spans">
                                        <span>{{item.jobCity_dictText}}</span>
                                        <span>{{item.eduLevel_dictText}}</span>
                                        <span>{{item.experience}}</span>
                                        <span>{{item.needCount}}人</span>
                                    </div>
                                </div>
                                <div class="company">
                                    <div class="text fl">
                                        <div class="companyName">{{item.companyName}}</div>
                                        <div class="companyOther">
                                            <span>{{item.enNature}}</span>
                                            <span v-if="item.enPersonnel_dictText">{{item.enPersonnel_dictText}}</span>
                                        </div>
                                    </div>
                                    <div class="logo fr">
                                        <img :src="item.companyLogo_dictText">
                                    </div>
                                </div>
                                <div class="fu">
                                    <span v-for="(x,y) in item.companyBenefits" :key="y">{{x}}</span>
                                </div>
                            </router-link>
                            <div class="hover">
                                <el-button type="primary" class="submit" slot="reference"  @click="SendResume(item.id)">申请职位</el-button>
                                <el-button type="text" icon="el-icon-star-off" class="collect" @click="collectionDelete(item.id)" v-if="item.collectState==0">取消收藏</el-button>
                                <el-button type="text" icon="el-icon-star-off" class="collect" @click="collectionAdd(item.id)" v-else>收藏职位</el-button>
                            </div>
                        </div>
                    </div>
                    <!-- 暂无数据 -->
                    <nodata v-if="list.length==0" />
                    <el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="pageNo" :page-size='pageSize' :total="pageTotal" @current-change="handleCurrentChange"></el-pagination>
                </div>
                <div class="right fr">
                    <!-- 个人信息 -->
                    <PersonUserInfo @UploadResume="UploadResume" @LookEnclosure="LookEnclosure"/>
                </div>
            </div>
        </div>
        <!-- 底部 -->
		<Footer />
    </div>
</template>

<script>
    import {workIntention,baseSearch,collectStateList,collectionDelete,collectionAdd} from '@/api/api'
    import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import PersonUserInfo from '@/components/PersonUserInfo.vue'
    import nodata from '@/components/nodata.vue'
    export default {
        //组件注入
        components: {Header,Footer,PersonUserInfo,nodata},
        //存放数据
        data() {
            return {
                wantJob:[],
                wantJobSelect:'',
                wantJobActive:0,
                pageNo:1,
                pageSize:10,
                pageTotal:1,//总数
                list:[]
            }
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            //上传简历
            UploadResume(e){
                this.$refs.Header.UploadResumeFlag = e.UploadResumeFlag
            },
            //投递简历
            SendResume(id){
                if(this.userLoginFlag()){
                    this.$refs.Header.SendResumeFlag = true
                    this.$refs.Header.JobId = id
                }
            },
            //预览附件简历
            LookEnclosure(e){
                this.$refs.Header.LookEnclosureFlag = e.LookEnclosureFlag
            },
            //选择期望职位
            changeJob(index,val){
                this.wantJobActive = index
                this.wantJobSelect = val
                this.getList()
            },
            //切换页码
            handleCurrentChange(pageNo){
                this.pageNo = pageNo
                this.list = []
                this.getList();
            },
            //收藏职位
            collectionAdd(id){
                collectionAdd({
                    'jobId': id
                }).then(res =>{
                    if(res.code==200){
                        this.$message.success('收藏成功');
                        for(let i in this.list){
                            if(this.list[i].id==id){
                                this.list[i].collectState = 0
                            }
                        }
                    }else{
                        this.$message.error(res.message);
                    }
                });
            },
            //取消收藏职位
            collectionDelete(id){
                collectionDelete({
                    'id': id
                }).then(res =>{
                    if(res.code==200){
                        this.$message.success('取消收藏成功');
                        for(let i in this.list){
                            if(this.list[i].id==id){
                                this.list[i].collectState = 1
                            }
                        }
                    }else{
                        this.$message.error(res.message);
                    }
                });
            },
            //获取列表
            getList(){
                baseSearch({
                    'type':'job',
                    'title.keywords':this.wantJobSelect,//搜索内容
                    'pageNo':this.pageNo,
                    'pageSize':this.pageSize,
                    'sort': false,//排序方式 true:正序 false:倒序
                }).then(res =>{
                    if(res.code==200){
                        this.pageTotal = res.result.total
                        let list = res.result.records
                        for(let i in list){
                            list[i].money = list[i].minMoney/1000 + 'K-' + list[i].maxMoney/1000 + 'K'
                            if(list[i].minExperience==0&&list[i].maxExperience==0){
                                list[i].experience = '无经验'
                            }else if(list[i].minExperience==0&&list[i].maxExperience==999){
                                list[i].experience = '不限'
                            }else if(list[i].minExperience==null&&list[i].maxExperience==null){
                                list[i].experience = '无经验'
                            }else{
                                list[i].experience = list[i].minExperience + '-' + list[i].maxExperience + '年'
                            }
                        }
                        //判断登录状态 查询收藏状态
                        if(list.length>0&&this.userLoginFlag1()){
                            let ids = ''
                            for(let i in list){
                                ids += list[i].id + ','
                            }
                            //收藏状态
                            collectStateList({
                                'jobId': ids
                            }).then(res =>{
                                if(res.code==200){
                                    for(let i in res.result){
                                        list[i].collectState = res.result[i].collectState
                                    }
                                    this.list = list
                                }
                            });
                        }else{
                            this.list = list
                        }
                    }
                });	
            },
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {},
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            //判断登录状态
            this.userLoginFlag()
            //我期望的职位
            workIntention({}).then(res =>{
                if(res.code==200){
                    let list = res.result
                    for(let i in list){
                        list[i].workNature = list[i].workNature.split(',')[2]
                        list[i].workNature_dictText = list[i].workNature_dictText.split(',')[2]
                    }
                    this.wantJob = list
                    if(list.length>0){
                        this.wantJobSelect = list[0].workNature_dictText
                    }
                    this.getList()
                }
            });
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .Person{background: #f6f6f6;
        .main{
            .banner{width: 100%;height: 120px;background: url('../../assets/person-bg.jpg') center no-repeat;background-size: cover;}
            .block{height: auto;overflow: hidden;margin-top: 30px;padding-bottom: 100px;
                .left{width: 900px;height: auto;overflow: hidden;
                    .wantJob{height: auto;overflow: hidden;background: #fff;margin-bottom: 10px;
                        .item{width: 180px;font-size: 16px;color: #333;line-height: 50px;float: left;cursor: pointer;text-align: center;position: relative;
                            &.active{color: #E54437;
                                &:after{content: "";width: 100%;height: 2px;background: #E54437;position: absolute;left: 0;bottom: 0;}
                            }
                        }
                        .el-input__inner{border: 0;font-size: 16px;color: #333;text-align: center;height: 50px;line-height: 50px;
                            &::placeholder{color: #333;}
                            &::-moz-placeholder{color: #333;}
                            &:-ms-input-placeholder{color: #333;}
                            &::-webkit-input-placeholder{color: #333;}
                        }
                        .el-input__suffix{display: none;}
                    }
                    .list{height: auto;overflow: hidden;background: #fff;
                        .item{height: auto;overflow: hidden;padding: 20px;display: block;border-bottom: 1px solid #eee;position: relative;
                            a{display: block;}
                            .title{font-size: 16px;color: #333;font-weight: bold;}
                            .other{height: auto;overflow: hidden;margin-top: 13px;
                                .money{font-size: 20px;color: #E72618;float: left;margin-right: 35px}
                                .spans{height: auto;overflow: hidden;
                                    span{font-size: 14px;color: #666666;position: relative;padding-right: 12px;margin-left: 12px;
                                        &:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;right: 0;top: 2px;}
                                        &:first-child{margin: 0;}
                                        &:last-child:after{display: none;}
                                    }
                                }
                            }
                            .company{height: auto;overflow: hidden;position: absolute;right: 30px;top: 35px;
                                .text{height: auto;overflow: hidden;margin-right: 23px;text-align: right;
                                    .companyName{font-size: 14px;color: #666;font-weight: bold;@include text-ellipsis()}
                                    .companyOther{margin-top: 5px;
                                        span{font-size: 13px;color: #666;position: relative;padding-left: 12px;margin-left: 12px;
                                            &:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;left: 0;top: 3px;}
                                            &:first-child{margin: 0;}
                                            &:first-child:after{display: none;}
                                        }
                                    }
                                }
                                .logo{width: 105px;height: 45px;overflow: hidden;
                                    img{width: 100%;height: 100%;}
                                }
                            }
                            .fu{height: 25px;overflow: hidden;margin-top: 15px;
                                span{font-size: 12px;color: #74767A;border: 1px solid #eee;padding: 2px 8px 3px;margin: 0 0 8px 8px;background: #F9F9F9;float: left;
                                    &:first-child{margin: 0;}
                                }
                            }
                            .hover{width: 400px;height: 100%;padding: 50px 0;position: absolute;background: #fff;right: 0;top: 0;display: none;
                                .el-button{height: 40px;padding: 0 20px;float: right;margin-right: 30px;border-radius: 5px !important;}
                                .collect{color: #999;@include transition();
                                    i{font-size: 18px;vertical-align: -1px;}
                                    &:hover{color: #E54437;}
                                }
                            }
                            &:hover{
                                .hover{display: block;}
                            }
                        }
                    }
                }
                .right{width: 270px;height: auto;overflow: hidden;}
            }
        }
    }
</style>